<template>
	<view class="main">
		<div class="mid">
			<u-list style="height: 94.6vh;" :lowerThreshold="10" @scrolltolower="scrolltolowerX()">
				<u-list-item v-for="(item, index) in xjDevList" :key="index"
					style="background-color: #FFFFFF;margin-bottom: 8px;">
					<div style="" @click="detailXJDev(item)">
						<u-row justify="space-between"
							:style="{ 'margin-top': (item.xjzt == '已完成' || item.xjzt == '进行中') ? '30px' : '20px','margin-bottom':'20px'}">
							<u-col span="4.5">
								<text
									style="font-size: 16px;font-family: 'PingFang SC';color: #212121;margin-left: 24px;"
									@click.stop="detailXJSB(item)">{{item.name}}</text>
								<div v-if="item.xjzt=='未巡检'" style="margin-top: 4px;margin-left: 24px;">
									<text
										style="font-size: 14px;font-family: 'Noto Sans CJK SC';color: #666666;">距离{{item.distance}}米</text>
								</div>
							</u-col>
							<u-col span="3.5">
								<div style="display: flex;align-items: center;margin-left: 60px;">
									<u-badge :isDot="true" :type="getType(item.xjzt)"
										style="margin-right:8px ;"></u-badge>
									<text
										style="font-size: 14px;font-family: 'PingFang SC';color: #212121;">{{ item.xjzt }}</text>
								</div>
							</u-col>
							<u-col span="4">
								<div style="display: flex;align-items: center;">
									<div v-if="item.xjzt=='已完成'" style="margin-left: 40px;">
										<image :src="finishUrl" style="width: 26.67px;height: 26.67px;"></image>
									</div>
									<div v-if="item.xjzt=='已完成'" style="margin-left: 26px;">
										<image :src="rightUrl" style="width: 7px;height: 12px;"></image>
									</div>
									<div v-if="item.xjzt=='未巡检'||item.xjzt=='进行中'" style="margin-left: 60px;">
										<image :src="rightUrl" style="width: 7px;height: 12px;margin-left: 30px;">
										</image>
									</div>
								</div>
							</u-col>
						</u-row>
						<view class="location_wz" style="font-size: 14px;color: #666;margin:5px 0px 10px 24px;">
							<text>{{getLocation(item)}}</text>
              <u-icon name="map-fill" color="#FF5500" size="22" @click.native.stop.prevent="showMap(item)"></u-icon>
            </view>
					</div>
				</u-list-item>
			</u-list>
      
      <u-popup :show="showLocation" height="200px" mode="bottom" @close="closePopupLocation" round="10">
      	<view>
      		<view class="title" style="margin: 10px;">
      			请选择
      		</view>
      		<view class="baidu" @click="gotoBaidu" style="display: flex;align-items: center;justify-content: space-between;padding: 10px;">
      			<view class="baidu_left" style="display: flex;align-items: center;">
      				<view class="baidu_icon" style="height: 32px;width: 32px;border: 2px solid #c8c9cc;border-radius: 4px;">
      					<u--image :src="baiduIcon" width="32px" height="32px"></u--image>
      				</view>
      				<view style="margin-left: 20px;">百度地图</view>
      			</view>
      			<view class="baidu_right">
      				<u--image :src="gotoIcon" width="22px"
      				    height="22px"
      				  ></u--image>
      			</view>
      		</view>
      		<view class="gaode" @click="gotoGaode" style="display: flex;align-items: center;justify-content: space-between;padding: 10px;margin-bottom: 20px;">
      			<view class="gaode_left" style="display: flex;align-items: center;">
      				<view class="gaode_icon" style="height: 32px;width: 32px;border: 2px solid #c8c9cc;border-radius: 4px;">
      					<u--image :src="gaodeIcon" width="32px" height="32px"></u--image>
      				</view>
      				<view style="margin-left: 20px;">高德地图</view>
      			</view>
      			<view class="gaode_right">
      				<u--image :src="gotoIcon" width="22px"
      				    height="22px"
      				  ></u--image>
      			</view>
      		</view>
      	</view>
      </u-popup>
		</div>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../common/wst_hydra-1.0.0.js');

  import { wgs84ToGcj02, wgs84ToBd09 } from '@/common/coordinateUtils.js'
	import coordtransform from 'coordtransform';
	import {
		getPlanDevice,
		getDateDic
	} from '@/common/api.js'
	import {
		distance
	} from '@/common/gis/distance.js'
	export default {
		onLoad: function(option) {
			this.reqDev.planId = option.id
			uni.setNavigationBarTitle({
				title: option.title
			});
		},
		onShow() {
			this.getStatusL()
			this.getDevice()
			document.body.style.overflow = 'auto';
		},
		data() {
			return {
				/* tab栏 */
				tablist: [{
					name: '全部巡检点'
				}],
				currentTab: 0,
				/* 状态 */
				status: {
					status: "Enabled",
					type: "INSPECTION_STATUS"
				},
				/* 数据 */
				reqDev: {
					pageNum: 1,
					pageSize: 10,
					planId: null
				},
				isOver: false,
				xjDevList: [],
				xjDevTotal: 0,
				options: {
					units: "meters"
				},
				nowDis: [],
				/* 图片 */
				finishUrl: require("../../../static/icons/done.png"),
				rightUrl: require("../../../static/icons/xjyw/arrow-right.png"),
				baiduIcon:require("@/static/assets/baidu.png"),
				gaodeIcon:require("@/static/assets/gaode.png"),
				gotoIcon:require("@/static/assets/goto.png"),
        showLocation: false,
        info: {}
			}
		},
		methods: {
			getLocation(item) {
				let result = '位置：'
				let temp = ''
				if (item) {
					let a = item.azdz ? item.azdz : ''
					let b = item.bz ? item.bz : ''
					if (a && b) {
						return result + a + ' - ' + b
					} else if (a && !b) {
						return result + a
					} else if (!a && b) {
						return result + b
					} else {
						return result + '--'
					}
				} else {
					return result + '--'
				}
			},
			/* 查询状态数据字典 */
			getStatusL() {
				getDateDic(this.status).then(response => {
					this.statusList = response
				})
			},
			getType(status) {
				switch (status) {
					case '已完成':
						return 'success';
					case '进行中':
						return 'primary';
					case '未巡检':
						return 'info';
					default:
						return 'default';
				}
			},
			/* 获取数据 */
			getDevice() {
				getPlanDevice(this.reqDev).then(response => {
					this.isOver = response.nextPage == 0 ? true : false;
					this.xjDevList = response.list;
					this.xjDevList.forEach(item => {
						let statusTemp = this.statusList.find(status => status.code === item.xjzt);
						if (statusTemp) {
							item.xjzt = statusTemp.name;
						}
					});
					this.getTest();
				})
			},
			getTest() {
				let that = this
				window.croods.customPlugin({
					action: 'ServicePermissionPlugin.getLocation',
					params: {
						reason: '获取定位信息',
						required: 1,
						permissionPurpose: '测算距离',
						coorType: 'GCJ02'
					},
					success: function(res) {
						let wgs84Coords = coordtransform.gcj02towgs84(res.longitude, res.latitude);
						let nowDis = [wgs84Coords[0], wgs84Coords[1]];
						that.xjDevList.forEach(item => {
							if (item.xjzt == '未巡检') {
								let itemDis = [item.lng, item.lat];
								that.$set(item, 'distance', Math.round(distance(nowDis, itemDis, that
									.options)));
							}
						});
					},
					fail: function(msg) {
						that.$u.toast('定位获取失败')
					}
				});
			},
			/* 触底刷新 */
			scrolltolowerX() {
				if (this.isOver) {
					return
				} else {
					this.reqDev.pageNum += 1
					getPlanDevice(this.reqDev).then(response => {
						this.isOver = response.nextPage == 0 ? true : false;
						let data = [];
						data = response.list;
						data.forEach(item => {
							let statusTemp = this.statusList.find(status => status.code === item.xjzt);
							if (statusTemp) {
								item.xjzt = statusTemp.name;
							}
						});
						this.xjDevList = this.xjDevList.concat(data);
						this.getTest();
					})

				}
			},
			/* 设备详情 */
			detailXJDev(item) {
				if ('recordId' in item) {
					if (item.recordId == null) {
						item.recordId = ""
						this.jumpToDetail(item)
					} else {
						this.jumpToDetail(item)
					}
				} else {
					item.recordId = ""
					this.jumpToDetail(item)
				}
			},
			jumpToDetail(item) {

				if (item.xjzt == "已完成") {
					this.detailXJSB(item)
				} else {
					uni.navigateTo({
						url: `/pages/xjyw/xjrwxq/index?recordId=${item.recordId}&deviceId=${item.deviceId}&lx=${item.lx}&planId=${item.planId}`,
					})
				}
			},
			detailXJSB(item) {
				if (item.xjzt == "已完成") {
					uni.navigateTo({
						url: `/pages/xjyw/xjsbxq/index?recordId=${item.recordId}`,
					})
				} else {
					this.detailXJDev(item)
				}
			},
      showMap(item){
        this.info = item
      	if(item.name && item.lng && item.lat){
      		this.showLocation = true
      	}else{
      		uni.$u.toast("当前设施信息缺失无法前往导航")
      	}
      },
      closePopupLocation(){
      	this.showLocation = false
      },
      gotoBaidu(){
      	const [bdLng, bdLat] = wgs84ToBd09(this.info.lng,this.info.lat)
      	let temp = `name:${this.info.name}|latlng:${bdLat},${bdLng}`
      	croods.customPlugin({
      		action: 'CustomJumpPlugin.goBaiduMap',
      		params: {
      			destination:temp,
      		},
      		success: function () {
      			
      		},
      		fail: function (msg) {
      		}
      	});
      },
      gotoGaode(){
      	const [gcjLng, gcjLat] = wgs84ToGcj02(this.info.lng,this.info.lat)
      	let temp = `&dlat=${gcjLat}&dlon=${gcjLng}&dname=${this.info.name}`
      	croods.customPlugin({
      		action: 'CustomJumpPlugin.goGaoDeMap',
      		params: {
      			destination:temp,
      		},
      		success: function () {
      			
      		},
      		fail: function (msg) {
      		}
      	});
      },
		},
		mounted() {
			this.getStatusL()
			this.getDevice()
		}
	}
</script>

<style>
	.main {
		background-color: #FAFAFA;
	}
  .location_wz {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .location_wz text {
    flex-basis: 67.5%;
  }
  .location_wz .u-icon {
    margin-left: 68px;
  }
</style>